<template>
    <MoveLayout :option="option" :index="index">
        <a-button v-bind="ButtonConfig">Button</a-button>
        <a-modal v-model:visible="SettingStatus" destroyOnClose :width="800" title="行配置" @ok="handleOk">
            <Option ref="RowConfigView" />
        </a-modal>
    </MoveLayout>
</template>
<script setup>
import MoveLayout from "../MoveLayout.vue";
import { provide, ref, shallowRef } from "vue";
import Option from "./Option.vue";
import * as icons from "@ant-design/icons-vue";

const props = defineProps(["option", "index"]);
const SettingStatus = ref(false);
const RowConfigView = ref();

provide("ClickMappingOption", function () {
    SettingStatus.value = true;
});

const ButtonConfig = ref({
    danger: false,
    block: false,
    type: "",
    ghost: false,
    shape: "default",
    icon: shallowRef(),
    size: undefined,
    loading: false,
    disabled: false,

    href: undefined,
    target: "",
});

const handleOk = (options) => {};
</script>
<style scoped>
.Title {
    padding: 0 8px;
    cursor: move;
}

.options {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
}

.icon {
    cursor: pointer;
    padding: 0 4px;
}

.icon:hover {
    color: #7974ff;
}
</style>
